微信小程序开发初学:图片组件

您所在的位置:网站首页 微信小程序image src 微信小程序开发初学:图片组件

微信小程序开发初学:图片组件

2023-10-08 19:38| 来源: 网络整理| 查看: 265

image组件用于在小程序中插入图片并对插入的图片进行简单修改。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

image具有的属性

src 类型:String 默认值:无 图片的网络地址或本地文件目录

mode 类型:String 默认值:scaleToFill 图片裁剪,缩放的模式

mode属性合法值 (1)scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 (通常图片会形变,不美观)

(2)aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。(图片保持原有纵横比,但图片略小)

(3)aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。(保持图片横纵比,但只会截取一部分显示)

(4)widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 (图片保持原有纵横比,铺满屏幕,美观且实用)

(5)heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

(6)裁剪模式的值 top:只显示顶部区域 bottom:只显示底部区域 center:只显示中间区域 left:只显示左边区域 right:只显示右边区域 top left , top right …

show-menu-by-longpress 类型:boolean 默认值:false 开启长按图片显示识别小程序码菜单

示例:

Img1:mode为默认属性 Img2 : mode="aspectFit" Img3 : mode="aspectFill" Img4 : mode="widthFix" Img5 : mode="heightFix" Img6 : show-menu-by-longpress设置允许用户对图片进行识别等操作

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 参考自小程序API:API - image



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3